<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .active{
            color: red;
        }
    </style>
</head>
<body>
    <div id="app">
        <!-- 

            路由分为几种：

            第一种：声明式路由 用router-link进行页面跳转的方式
            第二种： 编程式路由 this.$router进行页面跳转的方式

            声明式路由和编程式路由跳转规则及携参方式完全一样

            query和params

            query: 可以和name以及path合作传递参数 参数会显示在url地址上 刷新页面后参数不会丢失

            params: 只能和name合用传递参数 参数不会显示在url地址上 刷新页面后参数会丢失
         -->
        <router-view></router-view>
        <ul>
            <li @click="goPage1">进入页面一</li>
            <li @click="goPage2">进入页面二</li>
            <!-- <router-link exact-active-class="active" active-class="normal" tag="li" to="/page1">进入页面一</router-link>
            <router-link exact-active-class="active" active-class="normal" tag="li" to="/page2/123">进入页面二</router-link> -->
            <!-- <router-link :to="{
                path: '/page2',
                query: {
                    id: 123
                }
            }">进入页面二</router-link> -->
            <!-- <router-link :to="{
                name: 'page2',
                query: {
                    id: 123
                }
            }">进入页面二</router-link> -->
            <!-- <router-link :to="{
                name: 'page2',
                params: {
                    id: 123
                }
            }">进入页面二</router-link> -->
        </ul>
    </div>
    <script src="./js/vue.js"></script>
    <script src="./js/vue-router.js"></script>
    <script>
        const page1 = {
            template: `
                <div>
                    这是页面一
                    <button @click="goBack">上一页</button>
                    <p>{{msg}}</p>
                </div>
            `,
            methods: {
                goBack() {
                    // this.$router.back()
                    // this.$router.go(-1)
                    this.$router.forward()
                }
            }
        }

        const page2 = {
            template: `
                <div>这是页面二</div>
            `,
            created() {
                console.log(this.$route.params) // 获取parmas参数的方法
                // console.log(this.$route.query) // 获取query参数的方法 
            },
        }
        const routes = [
            {
                path: '/page1',
                component: page1
            },
            // {
            //     path: '/page2/:id', // 动态路由 :自定义的属性 该属性将来会成为parmas参数中的key 动态路由携带的parmas参数会显示在url地址上 并且刷新页面不会丢失
            //     name: 'page2',
            //     component: page2
            // },
            {
                path: '/page2', // 动态路由 :自定义的属性 该属性将来会成为parmas参数中的key 动态路由携带的parmas参数会显示在url地址上 并且刷新页面不会丢失
                name: 'page2',
                component: page2
            }
        ]
        let router = new VueRouter({
            routes
        })
        new Vue({
            el: '#app',
            router,

            methods: {
                goPage1() {
                    // [{}, {}, {}]
                    this.$router.push('/page1')
                    // this.$router.replace('/page1')
                   
                },

                goPage2() {
                    this.$router.push('/page2')
                }
            }
        })
    </script>
</body>
</html>